<template>
  <div class="dentallmage">
    <el-card class="version-log-management-page__header">
      <el-tabs v-model="activeName">
        <el-tab-pane :label="$t('oralScan.oralScan_56')" name="1" />
        <el-tab-pane :label="$t('oralScan.oralScan_57')" name="2" />
        <el-tab-pane :label="$t('oralScan.oralScan_59')" name="3" />
        <el-tab-pane :label="$t('oralScan.oralScan_60')" name="4" />
      </el-tabs>
    </el-card>

    <el-card class="version-log-management-page__body">
      <caseLabels v-if="activeName === '1'" />
      <photo v-if="activeName === '2'" />
      <ability v-if="activeName === '3'" />
      <usingData v-if="activeName === '4'" />
    </el-card>
  </div>
</template>

<script>
import caseLabels from './components/caseLabels.vue';
import photo from './components/photo.vue';
import ability from './components/ability.vue';
import usingData from './components/usingData.vue';

export default {
  name: 'dentallmage',

  data() {
    return {
      activeName: '1',
    };
  },
  components: {
    caseLabels,
    photo,
    ability,
    usingData,
  },

  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.dentallmage {
  width: 100%;
  height: 100%;
  .version-log-management-page__header {
    height: 60px;
    padding: 5px;
    ::v-deep .el-card__body {
      overflow: hidden;
      padding: 0px !important;
    }
  }

  .version-log-management-page__body {
    height: calc(100% - 60px - 20px);
    margin-top: 20px;
  }
  ::v-deep .el-tabs__nav {
    width: 100%;

    > div {
      width: 25%;
      text-align: center;
    }
  }
}
</style>
